<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="renderer" content="webkit" >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="<%=url%>">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
    <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
</head>
<style type="text/css">
    #input-limit{
        height: 30px;
        background-color: #1e9fff;
        color: whitesmoke;
        width: 60px;
        border:1px #1e9fff;
        border-radius: 4px;
    }

    #input-limit:hover{
        background-color:#bbdaff;
    }
    /*.layui-layer{*/
        /*top: 100px !important;*/
    /*}*/
</style>
<body>
<div class="layui-main">
    <!-- 表格上方标题 -->
    <blockquote class="layui-elem-quote">预约列表</blockquote>
    <div style="padding-left: 50px">
    <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">ID查询:</span><input type="text" placeholder="请输入ID" id="input-uid" style="height: 30px"></a>
    <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">姓名查询:</span><input type="text" placeholder="请输入姓名" id="input-uname" style="height: 30px"></a>
    <button   id="input-limit">搜索</button>
    </div>
        <hr/>
    <!-- 学生信息表 -->
    <table id="tbl" lay-filter="tbl"></table>
    <script type="text/html" id="tbl-toolbar">
        <!--<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>-->
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" >选择病人</a>
    </script>
</div>

<script>
    //设置时间格式
    function myDateFomat(t){
        var date=new Date(t);
        var y=date.getFullYear();
        var m=(date.getMonth()+1).toString().padStart(2,"0");
        var d=date.getDate().toString().padStart(2,"0");
        return y+"-"+m+"-"+d;
    }


    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
            elem: '#tbl',
            url: '/regist/list',
            method: 'get',

            //无数据的时候显示的提示信息
            text:{
                none:'当前暂无预约患者'
            },
            initSort: { //排序
                field: 'visitdate' //排序字段，对应 cols 设定的各字段名
                , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            },
            cols: [[
                // {field: 'id', title: 'ID'},
                {field: 'visid', title: '患者卡号'},
                {field: 'uname', title: '患者姓名',},
                {field: 'name', title: '预约医生',},
                {field: 'ksname', title: '预约科室'},
                {field: 'visitdate', title: '预约就诊时间',templet: "<div>{{layui.util.toDateString(d.visitdate, 'yyyy-MM-dd')}}</div>", width: 130},
                {field: 'aptdate', title: '预约时间',templet: "<div>{{layui.util.toDateString(d.aptdate, 'yyyy-MM-dd')}}</div>", width: 130},
                {field: 'schedule', title: '时间'},
                {field: 'state', title: '状态',},
                {field: 'notes', title: '备注'},
                {toolbar: '#tbl-toolbar', title: '操作', width: 200}
            ]],
            page: {
                limit: 5,//指定每页显示的条数
                limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
            }//开启分页

            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            },
            done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                //console.log(res);
                //得到当前页码
                //console.log(curr);
                //得到数据总量
                //console.log(count);
                $(".layui-table-box").find("[data-field='id']").css("display","none");
                $("[data-field='state']").children().each(function(){
                    if($(this).text()=='0'){
                        $(this).text("待诊治").css("color","green");
                    }else if($(this).text()=='1'){
                        $(this).text("治疗中").css("color","red");
                    }
                });
                pageCurr=curr;
            },





            // 表格容器id，用于表格重载
            id: 'tbl'
        });
        table.on('tool(tbl)', function (obj) {
            // 获取当前行数据和lay-event的值
            var data = obj.data;
            var event = obj.event;
            // 删除事件
            if (event === 'del') {
                var visitdate=data.visitdate;
                if (visitdate>new Date()) {
                    layer.open({
                        title:'提示'
                        ,content:'该患者预约时间不在今日！'
                        ,icon:2
                    })
                    return false;
                }




                layer.confirm('是否确认诊治该病人？', function (index) {
                         var id=data.id;
                      window.location.href="/regist/page?uid="+id;
                    // ajax方式删除//
                    layer.close(index);
                });
            }
        });

        $("#input-limit").click(function () {
            // var data = obj.data;
            var visid=$("#input-uid").val();
            var uname=$("#input-uname").val();
            // var did=data.did;
            console.log(visid+"<>"+uname+"<>")
            table.render({
                elem: '#tbl',
                url: '/regist/limitAll?visid='+visid+'&uname='+uname,
                method: 'get',
                initSort: { //排序
                    field: 'account' //排序字段，对应 cols 设定的各字段名
                    , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                },
                cols: [[
                    // {field: 'id', title: 'ID'},
                    {field: 'id', title: 'ID'},
                    {field: 'visid', title: '患者卡号'},
                    {field: 'uname', title: '患者姓名',},
                    {field: 'name', title: '预约医生',},
                    {field: 'ksname', title: '预约科室'},
                    {field: 'visitdate', title: '预约就诊时间',templet: "<div>{{layui.util.toDateString(d.visitdate, 'yyyy-MM-dd')}}</div>", width: 130},
                    {field: 'aptdate', title: '预约时间',templet: "<div>{{layui.util.toDateString(d.aptdate, 'yyyy-MM-dd')}}</div>", width: 130},
                    {field: 'schedule', title: '时间'},
                    {field: 'notes', title: '备注'},
                    {toolbar: '#tbl-toolbar', title: '操作', width: 200}
                ]],
                page: {
                    limit: 5,//指定每页显示的条数
                    limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
                }//开启分页

                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                },
                // 表格容器id，用于表格重载
                id: 'tbl'
            })
        })





    })

</script>
</body>
</html>